<template>
    <div>
        <video-play ref="playerRef" v-bind="options" :src="src" @play="onPlay" @pause="onPause" @timeupdate="onTimeupdate" @canplay="onCanplay" />
    </div>
</template>

<script setup lang="ts">
import { reactive, shallowRef } from "vue"
import "vue3-video-play/dist/style.css"
import VideoPlay from "vue3-video-play"
const props = defineProps({
    src: {
        type: String,
        required: true
    },
    width: String,
    height: String,
    poster: String
})

const playerRef = shallowRef()
const options = reactive({
    color: "var(--el-color-primary)", //主题色
    muted: false, //静音
    webFullScreen: false,
    speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
    autoPlay: true, //自动播放
    loop: false, //循环播放
    mirror: false, //镜像画面
    ligthOff: false, //关灯模式
    volume: 0.3, //默认音量大小
    control: true, //是否显示控制器
    title: "", //视频名称
    poster: "", //封面
    ...props
})

const play = () => {
    playerRef.value.play()
}

const pause = () => {
    playerRef.value.pause()
}

const onPlay = (event: any) => {
    console.log(event, "播放")
}
const onPause = (event: any) => {
    console.log(event, "暂停")
}

const onTimeupdate = (event: any) => {
    console.log(event, "时间更新")
}
const onCanplay = (event: any) => {
    console.log(event, "可以播放")
}

defineExpose({
    play,
    pause
})
</script>
